<div ng-controller="Wiki.CamelController">

  <div class="wiki-fixed" ng-controller="Wiki.CamelCanvasController">
    <ng-include src="'app/wiki/html/camelNavBar.html'"></ng-include>

    <script type="text/ng-template"
            id="nodeTemplate">
      <div class="component window"
           id="{{id}}"
           title="{{node.tooltip}}">
        <div class="window-inner {{node.type}}">
          <img class="nodeIcon"
               title="Click and drag to create a connection"
               src="{{node.imageUrl}}">
          <span class="nodeText"
                title="{{node.label}}">{{node.label}}</span>
        </div>
      </div>
    </script>


    <div class="row-fluid">
      <div class="span12">
        <ul class="nav nav-tabs">
          <li ng-class="{active : true}">
            <a ng-href='{{startLink}}/camel/canvas/{{pageId}}' title="Edit the diagram in a draggy droppy way"
               data-placement="bottom">
              <i class="icon-picture"></i> Canvas</a></li>
          <li ng-class="{active : false}">
            <a href='' ng-click='confirmSwitchToTreeView()' title="Switch to the tree based view"
               data-placement="bottom">
              <i class="icon-sitemap"></i> Tree</a></li>

          <li class="pull-right">
            <a href='' title="Add new pattern node connecting to this pattern" ng-click="addDialog.open()"
               data-placement="bottom">
              <i class="icon-plus"></i> Add</a></li>

          <li class="pull-right">
            <a href='' title="Automatically layout the diagram " ng-click="doLayout()"
               data-placement="bottom">
              <i class="icon-magic"></i> Layout</a></li>

          <li class="pull-right" style="margin-top: 0; margin-bottom: 0;">
            </li>

          <!--
          <li class="pull-right">
            <a href='' title="Edit the properties for the selected node" ng-disabled="!selectedFolder"
               ng-click="propertiesDialog.open()"
               data-placement="bottom">
              <i class="icon-edit"></i> Properties</a></li>
              -->
        </ul>

        <div class="modal-large">
          <div modal="addDialog.show" close="addDialog.close()" ng-options="addDialog.options">
            <form class="form-horizontal no-bottom-margin" ng-submit="addAndCloseDialog()">
              <div class="modal-header"><h4>Add Node</h4></div>
              <div class="modal-body">
                <tabset>
                  <tab heading="Patterns">
                    <div hawtio-tree="paletteTree" hideRoot="true" onSelect="onPaletteSelect"
                         activateNodes="paletteActivations"></div>
                  </tab>
                  <tab heading="Endpoints">
                    <div hawtio-tree="componentTree" hideRoot="true" onSelect="onComponentSelect"
                         activateNodes="componentActivations"></div>
                  </tab>
                </tabset>
              </div>
              <div class="modal-footer">
                <input id="submit" class="btn btn-primary add" type="submit" ng-disabled="!selectedPaletteNode && !selectedComponentNode"
                       value="Add">
                <button class="btn btn-warning cancel" type="button" ng-click="addDialog.close()">Cancel</button>
              </div>
            </form>
          </div>
        </div>


        <!--
        <div modal="propertiesDialog.show" close="propertiesDialog.close()" ng-options="propertiesDialog.options">
          <form class="form-horizontal no-bottom-margin" ng-submit="updatePropertiesAndCloseDialog()">
            <div class="modal-header"><h4>Properties</h4></div>
            <div class="modal-body">

              <div ng-show="!selectedEndpoint"> -->
                <!-- pattern form --> <!--
                <div simple-form name="formEditor" entity='nodeData' data='nodeModel' schema="schema"
                     onsubmit="updatePropertiesAndCloseDialog"></div>
              </div>
              <div ng-show="selectedEndpoint"> -->
                <!-- endpoint form -->
                <!--
                <div class="control-group">
                  <label class="control-label" for="endpointPath">Endpoint</label>

                  <div class="controls">
                    <input id="endpointPath" class="span10" type="text" ng-model="endpointPath" placeholder="name"
                           typeahead="title for title in endpointCompletions($viewValue) | filter:$viewValue"
                           typeahead-editable='true'
                           min-length="1">
                  </div>
                </div>
                <div simple-form name="formEditor" entity='endpointParameters' data='endpointSchema'
                     schema="schema"></div>
              </div>


            </div>
            <div class="modal-footer">
              <input class="btn btn-primary add" type="submit" ng-click="updatePropertiesAndCloseDialog()" value="OK">
              <button class="btn btn-warning cancel" type="button" ng-click="propertiesDialog.close()">Cancel</button>
            </div>
          </form>
        </div>
        -->

      </div>
    </div>

    <div class="row-fluid">
    </div>

    <div class="panes gridStyle">
      <div class="left-pane">
        <div class="camel-viewport camel-canvas">
          <div style="position: relative;" class="canvas"></div>
        </div>
      </div>
      <div class="right-pane">
        <div class="camel-props">
          <div class="button-bar">
            <div class="centered">
              <form class="form-inline">
                <label>Route: </label>
                <select ng-model="selectedRouteId" ng-options="routeId for routeId in routeIds"></select>
              </form>
              <div class="btn-group">
                <button class="btn"
                        title="{{getDeleteTitle()}}"
                        ng-click="removeNode()"
                        data-placement="bottom">
                    <i class="icon-remove"></i> Delete {{getDeleteTarget()}}</button>
                <button class="btn"
                        title="Apply any changes to the endpoint properties"
                        ng-disabled="!isFormDirty()"
                        ng-click="updateProperties()">
                    <i class="icon-ok"></i> Apply</button>
                <!-- TODO Would be good to have this too
                <button class="btn"
                        title="Clear any changes to the endpoint properties"
                        ng-disabled="!isFormDirty()"
                        ng-click="resetForms()">
                  <i class="icon-remove"></i> Cancel</button> -->
              </div>
            </div>
          </div>
          <div class="prop-viewport">

            <div>
              <!-- pattern form -->
              <div ng-show="!selectedEndpoint">
                <div simple-form
                     name="formEditor"
                     entity='nodeData'
                     data='nodeModel'
                     schema="schema"
                     onsubmit="updateProperties"></div>
              </div>

              <!-- endpoint form -->
              <div class="endpoint-props" ng-show="selectedEndpoint">
                <p>Endpoint</p>
                <form name="endpointForm">
                  <div class="control-group">
                    <label class="control-label" for="endpointPath">URI:</label>

                    <div class="controls">
                      <input id="endpointPath" class="span10" type="text" ng-model="endpointPath" placeholder="name"
                             typeahead="title for title in endpointCompletions($viewValue) | filter:$viewValue"
                             typeahead-editable='true'
                             min-length="1">
                    </div>
                  </div>
                </form>

                <div simple-form
                     name="formEditor"
                     entity='endpointParameters'
                     data='endpointSchema'
                     schema="schema"
                     onsubmit="updateProperties"></div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div hawtio-confirm-dialog="switchToTreeView.show" ok-button-text="Yes" cancel-button-text="No" on-ok="doSwitchToTreeView()" title="You have unsaved changes">
      <div class="dialog-body">
        <p>Unsaved changes will be discarded. Do you really want to switch views?</p>
      </div>
    </div>

  </div>
</div>
